<template>
	<view class="container" :style="appThemeStyle">
		<!-- 一级分类 -->
		<scroll-view class="cate-left" :scroll-y="true" @touchmove.stop.prevent>
			<!-- <view class="type-nav left-view" :class="{ selected: curIndex == -1 }">
				<image class="left-banner" src="/static/illustration/leftbg.png"></image>
			</view>
			<text class="type-nav special-nav" :class="{ selected: curIndex == -1 }" @click="handleSelectNav(-1)">
				当季爆款
			</text> -->

			<view :class="{ selected_d: curIndex == index }" v-for="(item, index) in list" :key="index">
				<view class="type-nav left-view" :class="{ selected: curIndex == index }"
					@click="handleSelectNav(index)">
					<image v-if="curIndex == index" class="left-banner" :src="item.image.preview_url"></image>
					<!-- <image class="left-banner" :src="item.image"></image> -->
				</view>
				<text class="type-nav" :class="{ selected: curIndex == index }"
					@click="handleSelectNav(index)">{{ item.name }}</text>
			</view>

		</scroll-view>

		<mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ use: false }" :up="upOption"
			:bottombar="false" @up="upCallback">

			<view class="cate-content">

				<!-- 子分类 -->
				<view v-if="subCateList.length" class="sub-cate-list clearfix" :class="{ 'display-fold': !showSubCate }"
					@touchmove.stop.prevent>
					<view class="nav-icon" @click="handleShowSubCate">
						<text class="iconfont" :class="[ showSubCate ? 'icon-arrow-up' : 'icon-arrow-down' ]"></text>
					</view>
					<view class="sub-cate-item" :class="{ selected: curIndex2 == -1 }" @click="handleSelectSubCate(-1)">

						<text>全部</text>
					</view>
					<view class="sub-cate-item" v-for="(item, index) in subCateList" :key="index"
						:class="{ selected: curIndex2 == index }" @click="handleSelectSubCate(index)">
						<text>{{ item.name }}</text>
					</view>
				</view>

				<!-- 商品列表 -->
				<view class="goods-list">
					<image class="banner" src="/static/illustration/banner.png"></image>
					<view class="goods-item--container" v-for="(item, index) in goodsList.data" :key="index">
						<view class="goods-item" @click="onTargetGoods(item.goods_id)">
							<!-- 商品图片 -->
							<view class="goods-item-left">
								<!-- <text v-if="index<2" class="zhaopai">招牌</text> -->
								<image class="image" :src="item.goods_image"></image>
							</view>
							<view class="goods-item-right">
								<!-- 商品标题 -->
								<view class="goods-name">
									<text class="twoline-hide">{{ item.goods_name }}</text>
								</view>
								<!-- 商品卖点 -->
								<view v-if="item.selling_point" class="good-info">
									<text>{{ item.selling_point }}</text>
								</view>
								<!-- 商品信息 -->
								<view class="goods-item-desc">
									<view class="desc-footer">
										<view class="item-prices oneline-hide">
											<text class="price-x">¥{{ item.goods_price_min }}</text>
											<text v-if="item.line_price_min > 0"
												class="price-y">¥{{ item.line_price_min }}</text>
										</view>
										<add-cart-btn class="price-btn" v-if="setting.showAddCart"
											:btnStyle="setting.cartStyle" @handleAddCart="handleAddCart(item)" />
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 遮罩层 -->
				<view class="mask" v-show="showSubCate" @touchmove.stop.prevent @click="handleShowSubCate"></view>
				<!-- 加入购物车组件 -->
				<AddCartPopup ref="AddCartPopup" @addCart="onUpdateCartTabBadge" />

			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins'
	import {
		getEmptyPaginateObj,
		getMoreListData,
		setCartTabBadge
	} from '@/core/app'
	import AddCartBtn from '@/components/add-cart-btn'
	import AddCartPopup from '@/components/add-cart-popup'
	import * as GoodsApi from '@/api/goods'

	const pageSize = 15

	export default {
		components: {
			AddCartBtn,
			AddCartPopup
		},
		mixins: [MescrollMixin],
		props: {
			// 分类列表
			list: {
				type: Array,
				default: []
			},
			// 分类设置
			setting: {
				type: Object,
				default: () => {}
			},
		},
		data() {
			return {
				// 一级分类：指针
				curIndex: 0,
				// 是否显示子分类
				showSubCate: false,
				// 二级分类：指针
				curIndex2: -1,
				// 商品列表
				goodsList: getEmptyPaginateObj(),
				// 上拉加载配置
				upOption: {
					// 首次自动执行
					auto: true,
					// 每页数据的数量; 默认10
					page: {
						size: pageSize
					},
					// 数量要大于3条才显示无更多数据
					noMoreSize: 3,
					// 返回顶部
					toTop: {
						right: 30,
						bottom: 48,
						zIndex: 9
					}
				}
			}
		},
		computed: {
			// 二级分类列表
			subCateList() {
				if (this.list[this.curIndex] && this.list[this.curIndex].children) {
					return this.list[this.curIndex].children
				}
				return []
			}
		},
		mounted(){
			uni.showTabBar({
			   animation: false,
			})
		},
		methods: {

			/**
			 * 上拉加载的回调 (页面初始化时也会执行一次)
			 * 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10
			 * @param {Object} page
			 */
			upCallback(page) {
				const app = this
				// 设置列表数据
				app.getGoodsList(page.num)
					.then(list => {
						const curPageLen = list.data.length
						const totalSize = list.data.total
						app.mescroll.endBySize(curPageLen, totalSize)
					})
					.catch(() => app.mescroll.endErr())
			},

			/**
			 * 获取商品列表
			 * @param {Number} pageNo 页码
			 */
			getGoodsList(pageNo = 1) {
				const app = this
				const categoryId = app.getCategoryId()
				return new Promise((resolve, reject) => {
					GoodsApi.list({
							categoryId,
							page: pageNo
						}, {
							load: false
						})
						.then(result => {
							const newList = result.data.list
							app.goodsList.data = getMoreListData(newList, app.goodsList, pageNo)
							app.goodsList.last_page = newList.last_page
							resolve(newList)
						})
						.catch(reject)
				})
			},

			// 获取当前选择的分类ID
			getCategoryId() {
				const app = this
				if (app.curIndex2 > -1) {
					return app.subCateList[app.curIndex2].category_id
				}
				return app.curIndex > -1 ? app.list[app.curIndex].category_id : 0
			},

			// 一级分类：选中分类
			handleSelectNav(index) {
				this.curIndex = index
				this.onRefreshList()
				this.showSubCate = false
				this.curIndex2 = -1
			},

			// 二级分类：选中分类
			handleSelectSubCate(index) {
				this.curIndex2 = index
				this.showSubCate = false
				this.onRefreshList()
			},

			// 刷新列表数据
			onRefreshList() {
				this.goodsList = getEmptyPaginateObj()
				setTimeout(() => this.mescroll.resetUpScroll(), 120)
			},

			// 跳转至商品列表页
			onTargetGoods(goodsId) {
				this.$navTo('pages/goods/detail', {
					goodsId
				})
			},

			// 点击加入购物车
			handleAddCart(item) {
				console.log(11)
				this.$refs.AddCartPopup.handle(item)
			},

			// 更新购物车角标
			onUpdateCartTabBadge() {
				console.log('onUpdateCartTabBadge')
				setCartTabBadge()
			},

			// 切换子分类显示状态
			handleShowSubCate() {
				this.showSubCate = !this.showSubCate
			}

		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding-left: 173rpx;
	}

	// 分类内容
	.cate-content {
		z-index: 1;
		background: #fff;
		padding-top: 100rpx;
		min-height: 300rpx;
	}

	// 一级分类+二级分类 20
	.cate-left {
		position: fixed;
		top: calc(108rpx + var(--window-top));
		left: var(--window-left);
		bottom: var(--window-bottom);
		width: 173rpx;
		height: calc(100% - var(--window-top) - var(--window-bottom) - 90rpx) !important;
		background: #f8f8f8;
		color: #444;

	}

	// 左侧一级分类
	.type-nav {
		position: relative;
		height: 70rpx;
		z-index: 10;
		display: block;
		font-size: 26rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-bottom: 40rpx;

		&.selected {
			background: #fff;
			border-right: none;
			font-size: 28rpx;
			font-weight: 500;
			color: #1A8148;
		}
	}

	.left-view {
		width: 100%;
		height: 90rpx;
		display: block;
		text-align: center;
		padding-top: 40rpx;
	}

	.left-banner {
		width: 131rpx;
		height: 34rpx;
	}

	.special-nav {
		height: 60rpx;
		padding-bottom: 30rpx;
	}

	// 商品列表
	.goods-list {
		position: relative;
		padding-top: 24rpx;

		.banner {
			width: 94%;
			height: 146rpx;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			margin-left: 3%;
			margin-bottom: 28rpx;
		}
	}

	.goods-item {
		padding: 16rpx 22rpx;
		display: flex;
	}

	.goods-item-left {
		position: relative;
		background: #fff;
		margin-right: 20rpx;

		.image {
			display: block;
			width: 206rpx;
			height: 192rpx;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
		}
		.zhaopai{
			position: absolute;
			top: 0;
			right: 0;
			display: inline-block;
			color: #fff;
			background-color: #ef6f4e;
			font-size: 24rpx;
			padding: 5rpx;
			border-radius: 5rpx;
		}
	}

	.goods-item-right {
		position: relative;
		flex: 1;

		.goods-name {
			display: block;
			width: 100%;
			min-height: 50rpx;
			font-size: 28rpx;
			line-height: 1.3;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #042111;
			.twoline-hide {
			    display: -webkit-box;
			    word-break: break-all;
			    text-overflow: ellipsis;
			    overflow: hidden;
			    -webkit-box-orient: vertical;
			    -webkit-line-clamp: 1!important;
			}
		}

		.good-info {
			width: auto;
			height: 44rpx;
			line-height: 44rpx;
			background: #f6faed;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #1A8148;
			/* padding-left: 10rpx; */
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			display: inline-block;
			padding: 0 15rpx;
		}
	}

	.goods-item-desc {
		margin-top: 20rpx;

		.people {
			margin-right: 14rpx;
		}

		.desc-footer {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: absolute;
			right: 0rpx;
			bottom: 0rpx;
			min-height: 44rpx;

			.item-prices {
				padding-right: 6rpx;

				.price-x {
					margin-right: 14rpx;
					font-weight: 500;
					font-size: 32rpx;
					color: #1A8148;
				}

				.price-y {
					color: #999;
					text-decoration: line-through;
					font-size: 24rpx;
				}

				.price-btn {
					font-size: 38rpx;
					padding: 0 20rpx;
					color: #3F9566 !important;
				}
			}

		}
	}


	// 子分类
	.sub-cate-list {
		background-color: #fff;
		width: 100%;
		z-index: 9;
		padding: 8rpx 40rpx 0 14rpx;
		overflow: hidden;
		position: sticky;
		top: calc(88rpx + var(--window-top));

		&.display-fold {
			height: 86rpx;
		}

		.nav-icon {
			position: absolute;
			right: 16rpx;
			top: 12rpx;
			font-size: 32rpx;
		}

		.sub-cate-item {
			float: left;
			background: #f8f8f8;
			padding: 10rpx 30rpx;
			margin-right: 22rpx;
			margin-bottom: 24rpx;
			font-size: 26rpx;
			border-radius: 14rpx;
			border: 1rpx solid #f8f8f8;

			&.selected {
				color: $main-bg;
				border: 1rpx solid $main-bg;
			}
		}
	}

	// 子分类遮罩层
	.mask {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		z-index: 8;
		background-color: rgba(0, 0, 0, 0.4);
		transition: all 0.3s ease-in-out 0s;
	}
	
</style>